<template>
  <canvas width="25" height="25" :id="'myCanvas' + this.okey"></canvas>
</template>

<script>
export default {
  name: "OrderNumber",
  data() {
    return {};
  },
  methods: {
    initCanvas() {
      var myCanvas = document.getElementById("myCanvas" + this.okey);
      var context = myCanvas.getContext("2d");
      //背景
      context.fillStyle = "#D0D0D0";
      context.fillRect(0, 0, 25, 25);
      //字体
      context.font = "18px Arial bolder";
      context.fillStyle = "#FFFFFF";
      context.textAlign = "center";
      context.fillText(this.id, 25 / 2, 18);
    }
  },
  created() {
    setTimeout(() => {
      this.initCanvas(), 0;
    });
  },
  props: ["id", "okey"]
};
</script>

<style scoped></style>
